<template>
	<!-- 点击登录后跳转的  分h5和5+app显示的-->
	<view class="body">
		<!-- form提交表单  name值可获取信息-->
		<form @submit="formSubmit">
			<!-- 头像 -->
			<view class="face-wapper">
				<image src="../../static/icos/default-face.png" class="face"></image>
			</view>

			<view class="info-wapper">
				<label class="words-lbl">账号</label>
				<input name="username" type="text" value="" class="input" placeholder="请输入用户名" placeholder-class="graywords" />
			</view>

			<view class="info-wapper" style="margin-top: 40upx;">
				<label class="words-lbl">密码</label>
				<input name="password" type="text" value="" password="true" class="input" placeholder="请输入密码" placeholder-class="graywords" />
			</view>
			<button type="primary" form-type="submit" style="margin-top: 60upx;width: 90%;">注册/登录</button>
		</form>

		<!-- 第三方登录H5不支持，所以隐藏掉 使用条件编译排除h5  #ifndef除了某平台均存在-->
		<!-- #ifndef H5 -->
		<view class="third-wapper">

			<view class="third-line">
				<view class="single-line">
					<view class="line"></view>
				</view>

				<view class="third-words">第三方账号登录</view>

				<view class="single-line">
					<view class="line"></view>
				</view>
			</view>

			<view class="third-icos-wapper">
				<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 仅出现在 App 平台下的代码 连接第三方登录的 -->
				<!-- #ifdef APP-PLUS -->
				<image src="../../static/icos/weixin.png" data-logintype="weixin" @click="appOAuthLogin" class="third-ico"></image>
				<image src="../../static/icos/QQ.png" data-logintype="qq" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
				<image src="../../static/icos/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序平台存在的代码 -->
				<button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//实现用户的一键登录注册 从密码 到微信登录 到 app3个第三方的登录
			appOAuthLogin(e) {
				var me = this;
				// 获取用户的登录类型  //通过自定义属性得到的用来判断点击的是那个服务商
				var logintype = e.currentTarget.dataset.logintype;

				// 授权登录
				uni.login({
					provider: logintype, //服务商
					success(loginRes) { //成功执行的回调

						// 授权登录成功以后，获取用户的信息 
						uni.getUserInfo({
							provider: logintype,
							success(info) {
								// console.log(JSON.stringify(info));
								//定义一个全局 根据不同的服务商来得到不同的请求参数 
								var userInfo = info.userInfo; //用户信息
								var face = "";
								var nickname = "";
								var openIdOrUid = "";
								if (logintype == "weixin") { //微信登录
									face = userInfo.avatarUrl;
									nickname = userInfo.nickName;
									openIdOrUid = userInfo.openId;
								} else if (logintype == "qq") { //qq登录
									openIdOrUid = userInfo.openId;
									nickname = userInfo.nickname;
									face = userInfo.figureurl_qq_2;
								} else if (logintype == "sinaweibo") { //微博登录
									openIdOrUid = userInfo.id;
									nickname = userInfo.nickname;
									face = userInfo.avatar_large;
								}

								// 调用开发者后台，执行一键注册或登录 携带参数发送请求
								uni.request({
									url: me.serverUrl + "/appUnionLogin/" + logintype,
									data: {
										"openIdOrUid": openIdOrUid,
										"nickname": nickname,
										"face": face
									},
									method: "POST",
									success(result) { //请求成功 存本地 页面跳转
										if (result.data.status == 200) {
											var userInfo = result.data.data;
											// 保存用户信息到全局的缓存中
											uni.setStorageSync("globalUser", userInfo);
											// 切换页面跳转，使用tab切换的api
											uni.switchTab({
												url: "../me/me"
											});
										}
									}
								})
							}
						})
					}
				});
			},

			//实现微信登录 需要获取code 之后拿到openid  openid 是微信那边的用户唯一值  code 是通过login方法就能得到的 
			wxLogin(e) { //button绑定的getsuetinfo 绑定的回调 得到用户个人信息
				var me = this;
				// console.log(e);
				// 通过微信开发能力，获得微信用户的基本信息
				var userInfo = e.detail.userInfo;
				//微信登录的方法
				uni.login({
					provider: 'weixin', // 服务商
					success(loginResult) {
						// console.log(loginResult);
						// 获得微信登录的code：授权码  前提要配置appid 和serve秘钥
						var code = loginResult.code;
						// 设置登录到哪个对于的微信小程序，大家可以根据自己的后端去实现业务参数
						// [0:NEXT超英预告][1:超英预告][2:NEXT学院电影预告]
						var loginToWhichMP = 1;
						//发送请求 配置需要请求参数
						uni.request({
							url: me.serverUrl + "/mpWXLogin/" + code,
							data: {
								"avatarUrl": userInfo.avatarUrl,
								"nickName": userInfo.nickName,
								"whichMP": loginToWhichMP
							},
							method: "POST",
							success(userResult) { //请求成功后执行的回调 存储到本地存储中 跳转页面 三个套路
								console.log(userResult);
								var userInfo = userResult.data.data;
								// 保存用户信息到全局的缓存中  
								uni.setStorageSync("globalUser", userInfo);
								// 切换页面跳转，使用tab切换的api
								uni.switchTab({
									url: "../me/me"
								});
							}
						})
					}
				})
			},
			//提交表单密码账号登录
			formSubmit(e) {
				var me = this;
				var username = e.detail.value.username;
				var password = e.detail.value.password;
				//获取输入的用户名和密码 
				// 				console.log(username);
				// 				console.log(password);

				// 发起注册/登录的请求 发送请求携带参数
				var serverUrl = me.serverUrl;
				uni.request({
					url: serverUrl + '/user/registOrLogin',
					data: {
						"username": username,
						"password": password
					},
					method: "POST",
					success: (res) => { //请求成功后执行的回调  存储用户信息 和存本地存 和跳转页面  实现页面一键注册登录

						// 获取真实数据之前，务必判断状态是否为200
						if (res.data.status == 200) {
							var userInfo = res.data.data;
							// console.log(userInfo);
							// 保存用户信息到全局的缓存中
							uni.setStorageSync("globalUser", userInfo);
							// 切换页面跳转，使用tab切换的api
							uni.switchTab({
								url: "../me/me"
							});
						} else if (res.data.status == 500) { //请求不成功执行的回调 提示用户
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								image: "../../static/icos/error.png"
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	@import url("registLogin.css");
</style>
